<template>
  <view class="customize-container">
    <!-- 头部 -->
    <view class="header">
      <text class="back-btn" @click="goBack">←</text>
      <text class="header-title">自定义仪表板</text>
      <text class="save-btn" @click="saveConfiguration">保存</text>
    </view>

    <!-- 配置区域 -->
    <scroll-view class="config-area" scroll-y>
      <!-- 卡片显示配置 -->
      <view class="config-section">
        <text class="section-title">显示卡片</text>
        <view class="card-config">
          <view 
            v-for="card in cardConfigs" 
            :key="card.id"
            class="config-item"
          >
            <view class="item-info">
              <text class="item-title">{{ card.title }}</text>
              <text class="item-desc">{{ card.description }}</text>
            </view>
            <switch 
              :checked="card.enabled"
              @change="toggleCard(card.id)"
              color="#3b82f6"
            />
          </view>
        </view>
      </view>

      <!-- 图表配置 -->
      <view class="config-section">
        <text class="section-title">图表设置</text>
        <view class="chart-config">
          <view class="config-group">
            <text class="group-title">默认图表类型</text>
            <radio-group @change="changeChartType">
              <label v-for="type in chartTypes" :key="type.value" class="radio-item">
                <radio 
                  :value="type.value" 
                  :checked="type.value === selectedChartType"
                  color="#3b82f6"
                />
                <text class="radio-text">{{ type.label }}</text>
              </label>
            </radio-group>
          </view>
          
          <view class="config-group">
            <text class="group-title">图表颜色主题</text>
            <view class="color-palette">
              <view 
                v-for="color in colorPalettes" 
                :key="color.name"
                class="color-option"
                :class="{ active: color.name === selectedColorTheme }"
                @click="changeColorTheme(color.name)"
              >
                <view class="color-preview">
                  <view 
                    v-for="c in color.colors" 
                    :key="c"
                    class="color-block"
                    :style="{ backgroundColor: c }"
                  ></view>
                </view>
                <text class="color-name">{{ color.name }}</text>
              </view>
            </view>
          </view>
        </view>
      </view>

      <!-- 数据范围配置 -->
      <view class="config-section">
        <text class="section-title">数据范围</text>
        <view class="range-config">
          <view class="config-group">
            <text class="group-title">默认时间范围</text>
            <picker 
              :value="selectedTimeRange" 
              :range="timeRanges"
              range-key="label"
              @change="changeTimeRange"
            >
              <view class="picker-value">
                {{ selectedTimeRangeLabel }}
                <text class="picker-arrow">›</text>
              </view>
            </picker>
          </view>
          
          <view class="config-group">
            <text class="group-title">仓库选择</text>
            <view class="warehouse-selector">
              <view 
                v-for="warehouse in warehouses" 
                :key="warehouse.id"
                class="warehouse-item"
                :class="{ selected: selectedWarehouses.includes(warehouse.id) }"
                @click="toggleWarehouse(warehouse.id)"
              >
                <text class="warehouse-name">{{ warehouse.name }}</text>
                <view class="selection-indicator"></view>
              </view>
            </view>
          </view>
        </view>
      </view>

      <!-- 预警阈值配置 -->
      <view class="config-section">
        <text class="section-title">预警设置</text>
        <view class="warning-config">
          <view class="config-group">
            <text class="group-title">低库存阈值 (%)</text>
            <slider 
              :value="warningThresholds.lowStock" 
              min="5" 
              max="50" 
              step="5"
              @change="changeLowStockThreshold"
              active-color="#3b82f6"
              block-color="#3b82f6"
            />
            <text class="threshold-value">{{ warningThresholds.lowStock }}%</text>
          </view>
          
          <view class="config-group">
            <text class="group-title">滞销天数</text>
            <slider 
              :value="warningThresholds.slowMovingDays" 
              min="7" 
              max="90" 
              step="7"
              @change="changeSlowMovingDays"
              active-color="#3b82f6"
              block-color="#3b82f6"
            />
            <text class="threshold-value">{{ warningThresholds.slowMovingDays }}天</text>
          </view>
          
          <view class="config-group">
            <text class="group-title">临期预警天数</text>
            <slider 
              :value="warningThresholds.expiringDays" 
              min="1" 
              max="30" 
              step="1"
              @change="changeExpiringDays"
              active-color="#3b82f6"
              block-color="#3b82f6"
            />
            <text class="threshold-value">{{ warningThresholds.expiringDays }}天</text>
          </view>
        </view>
      </view>

      <!-- 刷新频率配置 -->
      <view class="config-section">
        <text class="section-title">刷新设置</text>
        <view class="refresh-config">
          <view class="config-group">
            <text class="group-title">自动刷新</text>
            <switch 
              :checked="autoRefresh.enabled"
              @change="toggleAutoRefresh"
              color="#3b82f6"
            />
          </view>
          
          <view v-if="autoRefresh.enabled" class="config-group">
            <text class="group-title">刷新间隔</text>
            <picker 
              :value="autoRefresh.interval" 
              :range="refreshIntervals"
              range-key="label"
              @change="changeRefreshInterval"
            >
              <view class="picker-value">
                {{ autoRefresh.intervalLabel }}
                <text class="picker-arrow">›</text>
              </view>
            </picker>
          </view>
        </view>
      </view>

      <!-- 预设模板 -->
      <view class="config-section">
        <text class="section-title">预设模板</text>
        <view class="template-grid">
          <view 
            v-for="template in templates" 
            :key="template.id"
            class="template-card"
            :class="{ active: template.id === selectedTemplate }"
            @click="applyTemplate(template.id)"
          >
            <view class="template-icon">{{ template.icon }}</view>
            <text class="template-name">{{ template.name }}</text>
            <text class="template-desc">{{ template.description }}</text>
          </view>
        </view>
      </view>
    </scroll-view>

    <!-- 底部操作 -->
    <view class="bottom-actions">
      <view class="action-btn btn-reset" @click="resetConfiguration">
        <text class="btn-text">重置</text>
      </view>
      <view class="action-btn btn-save" @click="saveConfiguration">
        <text class="btn-text">保存配置</text>
      </view>
    </view>
  </view>
</template>
/
export default {
  data() {
    return {
      cardConfigs: [
        { id: 'kpi', title: '关键指标', description: '显示核心业务指标', enabled: true },
        { id: 'charts', title: '图表分析', description: '库存趋势和分类图表', enabled: true },
        { id: 'warnings', title: '库存预警', description: '显示各类预警信息', enabled: true },
        { id: 'materials', title: '热门物料', description: '显示热门物料排行', enabled: true },
        { id: 'insights', title: '业务建议', description: '显示智能业务建议', enabled: true }
      ],
      selectedChartType: 'line',
      selectedColorTheme: 'default',
      selectedTimeRange: '7d',
      selectedWarehouses: ['all'],
      selectedTemplate: 'standard',
      warningThresholds: {
        lowStock: 20,
        slowMovingDays: 30,
        expiringDays: 7
      },
      autoRefresh: {
        enabled: true,
        interval: 300,
        intervalLabel: '5分钟'
      },
      chartTypes: [
        { label: '折线图', value: 'line' },
        { label: '柱状图', value: 'bar' },
        { label: '饼图', value: 'pie' },
        { label: '环形图', value: 'doughnut' }
      ],
      colorPalettes: [
        { name: '默认', colors: ['#3b82f6', '#10b981', '#f59e0b', '#ef4444', '#8b5cf6'] },
        { name: '商务', colors: ['#1e293b', '#475569', '#64748b', '#94a3b8', '#cbd5e1'] },
        { name: '活力', colors: ['#ec4899', '#f97316', '#eab308', '#22c55e', '#06b6d4'] },
        { name: '专业', colors: ['#0f172a', '#1e293b', '#334155', '#475569', '#64748b'] }
      ],
      timeRanges: [
        { label: '今日', value: '1d' },
        { label: '本周', value: '7d' },
        { label: '本月', value: '30d' },
        { label: '本季', value: '90d' },
        { label: '本年', value: '365d' }
      ],
      warehouses: [
        { id: 'all', name: '全部仓库' },
        { id: 'main', name: '主仓库' },
        { id: 'raw', name: '原材料库' },
        { id: 'finished', name: '成品库' },
        { id: 'semi', name: '半成品库' }
      ],
      refreshIntervals: [
        { label: '1分钟', value: 60 },
        { label: '5分钟', value: 300 },
        { label: '15分钟', value: 900 },
        { label: '30分钟', value: 1800 },
        { label: '1小时', value: 3600 }
      ],
      templates: [
        { id: 'standard', name: '标准版', description: '包含所有核心功能', icon: '📊' },
        { id: 'minimal', name: '简洁版', description: '只显示关键指标', icon: '🎯' },
        { id: 'executive', name: '管理版', description: '适合管理层查看', icon: '👔' },
        { id: 'operational', name: '运营版', description: '适合运营人员使用', icon: '⚙️' }
      ]
    }
  },
  
  computed: {
    selectedTimeRangeLabel() {
      const range = this.timeRanges.find(r => r.value === this.selectedTimeRange)
      return range ? range.label : '选择时间范围'
    }
  },
  
  methods: {
    toggleCard(cardId) {
      const card = this.cardConfigs.find(c => c.id === cardId)
      if (card) {
        card.enabled = !card.enabled
      }
    },
    
    changeChartType(e) {
      this.selectedChartType = e.detail.value
    },
    
    changeColorTheme(theme) {
      this.selectedColorTheme = theme
    },
    
    changeTimeRange(e) {
      this.selectedTimeRange = this.timeRanges[e.detail.value].value
    },
    
    toggleWarehouse(warehouseId) {
      if (warehouseId === 'all') {
        this.selectedWarehouses = ['all']
      } else {
        this.selectedWarehouses = this.selectedWarehouses.filter(id => id !== 'all')
        const index = this.selectedWarehouses.indexOf(warehouseId)
        if (index > -1) {
          this.selectedWarehouses.splice(index, 1)
        } else {
          this.selectedWarehouses.push(warehouseId)
        }
      }
    },
    
    changeLowStockThreshold(e) {
      this.warningThresholds.lowStock = e.detail.value
    },
    
    changeSlowMovingDays(e) {
      this.warningThresholds.slowMovingDays = e.detail.value
    },
    
    changeExpiringDays(e) {
      this.warningThresholds.expiringDays = e.detail.value
    },
    
    toggleAutoRefresh(e) {
      this.autoRefresh.enabled = e.detail.value
    },
    
    changeRefreshInterval(e) {
      const interval = this.refreshIntervals[e.detail.value]
      this.autoRefresh.interval = interval.value
      this.autoRefresh.intervalLabel = interval.label
    },
    
    applyTemplate(templateId) {
      this.selectedTemplate = templateId
      
      // 根据模板应用预设配置
      switch (templateId) {
        case 'minimal':
          this.cardConfigs.forEach(card => {
            card.enabled = ['kpi', 'charts'].includes(card.id)
          })
          break
        case 'executive':
          this.cardConfigs.forEach(card => {
            card.enabled = ['kpi', 'charts', 'insights'].includes(card.id)
          })
          break
        case 'operational':
          this.cardConfigs.forEach(card => {
            card.enabled = ['kpi', 'warnings', 'materials'].includes(card.id)
          })
          break
        default:
          this.cardConfigs.forEach(card => {
            card.enabled = true
          })
      }
    },
    
    saveConfiguration() {
      const config = {
        cards: this.cardConfigs,
        chartType: this.selectedChartType,
        colorTheme: this.selectedColorTheme,
        timeRange: this.selectedTimeRange,
        warehouses: this.selectedWarehouses,
        thresholds: this.warningThresholds,
        autoRefresh: this.autoRefresh,
        template: this.selectedTemplate
      }
      
      // 保存到本地存储
      uni.setStorageSync('dashboard-config', config)
      
      uni.showToast({
        title: '配置已保存',
        icon: 'success'
      })
      
      setTimeout(() => {
        uni.navigateBack()
      }, 1500)
    },
    
    resetConfiguration() {
      uni.showModal({
        title: '重置配置',
        content: '确定要重置所有配置为默认值吗？',
        success: (res) => {
          if (res.confirm) {
            // 重置为默认值
        cardConfigs.value.forEach(card => card.enabled = true)
        selectedChartType.value = 'line'
        selectedColorTheme.value = 'default'
        selectedTimeRange.value = '7d'
        selectedWarehouses.value = ['all']
        warningThresholds.value = {
          lowStock: 20,
          slowMovingDays: 30,
          expiringDays: 7
        }
        autoRefresh.value = {
          enabled: true,
          interval: 300,
          intervalLabel: '5分钟'
        }
        selectedTemplate.value = 'standard'
        
        uni.showToast({
          title: '已重置',
          icon: 'success'
        })
      }
    }
  })
}

const goBack = () => {
  uni.navigateBack()
}

// 初始化
const loadConfiguration = () => {
  const savedConfig = uni.getStorageSync('dashboard-config')
  if (savedConfig) {
    cardConfigs.value = savedConfig.cards || cardConfigs.value
    selectedChartType.value = savedConfig.chartType || 'line'
    selectedColorTheme.value = savedConfig.colorTheme || 'default'
    selectedTimeRange.value = savedConfig.timeRange || '7d'
    selectedWarehouses.value = savedConfig.warehouses || ['all']
    warningThresholds.value = savedConfig.thresholds || warningThresholds.value
    autoRefresh.value = savedConfig.autoRefresh || autoRefresh.value
    selectedTemplate.value = savedConfig.template || 'standard'
  }
}

// 页面加载时读取配置
loadConfiguration()
</script>

<style lang="scss" scoped>
.customize-container {
  min-height: 100vh;
  background: #f8fafc;
  display: flex;
  flex-direction: column;
}

.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 40rpx;
  background: #ffffff;
  border-bottom: 1rpx solid #e2e8f0;
  
  .back-btn,
  .save-btn {
    font-size: 32rpx;
    color: #3b82f6;
    padding: 10rpx;
  }
  
  .header-title {
    font-size: 36rpx;
    font-weight: 600;
    color: #1e293b;
  }
}

.config-area {
  flex: 1;
  padding: 20rpx;
  padding-bottom: 120rpx;
}

.config-section {
  background: #ffffff;
  border-radius: 16rpx;
  padding: 32rpx;
  margin-bottom: 20rpx;
  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
  
  .section-title {
    font-size: 32rpx;
    font-weight: 600;
    color: #1e293b;
    margin-bottom: 24rpx;
  }
}

.card-config,
.chart-config,
.range-config,
.warning-config,
.refresh-config {
  .config-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 24rpx 0;
    border-bottom: 1rpx solid #e2e8f0;
    
    &:last-child {
      border-bottom: none;
    }
    
    .item-info {
      flex: 1;
      
      .item-title {
        display: block;
        font-size: 28rpx;
        font-weight: 500;
        color: #1e293b;
      }
      
      .item-desc {
        display: block;
        font-size: 24rpx;
        color: #64748b;
        margin-top: 4rpx;
      }
    }
  }
  
  .config-group {
    margin-bottom: 32rpx;
    
    .group-title {
      display: block;
      font-size: 28rpx;
      font-weight: 500;
      color: #1e293b;
      margin-bottom: 16rpx;
    }
    
    .radio-item {
      display: flex;
      align-items: center;
      gap: 16rpx;
      padding: 16rpx 0;
      
      .radio-text {
        font-size: 28rpx;
        color: #1e293b;
      }
    }
    
    .color-palette {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 16rpx;
      
      .color-option {
        padding: 16rpx;
        border: 1rpx solid #e2e8f0;
        border-radius: 8rpx;
        text-align: center;
        transition: all 0.3s ease;
        
        &.active {
          border-color: #3b82f6;
          background: rgba(59, 130, 246, 0.1);
        }
        
        .color-preview {
          display: flex;
          gap: 4rpx;
          justify-content: center;
          margin-bottom: 8rpx;
          
          .color-block {
            width: 20rpx;
            height: 20rpx;
            border-radius: 2rpx;
          }
        }
        
        .color-name {
          font-size: 24rpx;
          color: #1e293b;
        }
      }
    }
    
    .picker-value {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 20rpx;
      background: #f8fafc;
      border-radius: 8rpx;
      font-size: 28rpx;
      color: #1e293b;
      
      .picker-arrow {
        color: #64748b;
      }
    }
    
    .warehouse-selector {
      display: flex;
      flex-direction: column;
      gap: 12rpx;
      
      .warehouse-item {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 20rpx;
        background: #f8fafc;
        border-radius: 8rpx;
        transition: all 0.3s ease;
        
        &.selected {
          background: rgba(59, 130, 246, 0.1);
          border: 1rpx solid #3b82f6;
        }
        
        .warehouse-name {
          font-size: 28rpx;
          color: #1e293b;
        }
        
        .selection-indicator {
          width: 24rpx;
          height: 24rpx;
          border-radius: 50%;
          border: 2rpx solid #e2e8f0;
          
          .selected & {
            background: #3b82f6;
            border-color: #3b82f6;
          }
        }
      }
    }
    
    .threshold-value {
      text-align: center;
      font-size: 28rpx;
      font-weight: 600;
      color: #3b82f6;
      margin-top: 8rpx;
    }
  }
}

.template-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16rpx;
  
  .template-card {
    padding: 32rpx;
    background: #f8fafc;
    border: 1rpx solid #e2e8f0;
    border-radius: 12rpx;
    text-align: center;
    transition: all 0.3s ease;
    
    &.active {
      background: rgba(59, 130, 246, 0.1);
      border-color: #3b82f6;
    }
    
    .template-icon {
      font-size: 48rpx;
      margin-bottom: 12rpx;
    }
    
    .template-name {
      display: block;
      font-size: 28rpx;
      font-weight: 600;
      color: #1e293b;
      margin-bottom: 8rpx;
    }
    
    .template-desc {
      display: block;
      font-size: 24rpx;
      color: #64748b;
    }
  }
}

.bottom-actions {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  display: flex;
  gap: 20rpx;
  padding: 20rpx;
  background: #ffffff;
  border-top: 1rpx solid #e2e8f0;
  
  .action-btn {
    flex: 1;
    padding: 24rpx 0;
    border-radius: 12rpx;
    text-align: center;
    font-size: 28rpx;
    font-weight: 500;
    transition: all 0.3s ease;
    
    &.btn-reset {
      background: #e2e8f0;
      color: #1e293b;
    }
    
    &.btn-save {
      background: #3b82f6;
      color: white;
    }
    
    &:active {
      opacity: 0.8;
    }
  }
}
</style>